<template>
  <div class="personal-profile">
    <el-card class="profile-card">
      <div class="card-header">
        <h2>个人信息</h2>
      </div>
      <div class="info-list">
        <div class="info-item">
          <span class="label">用户名：</span>
          <span>{{ userInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">姓名：</span>
          <span>{{ userInfo.nickName }}</span>
        </div>
        <div class="info-item">
          <span class="label">部门：</span>
          <span>{{ userInfo.deptName }}</span>
        </div>
        <div class="info-item">
          <span class="label">角色：</span>
          <span>{{ userInfo.roleName }}</span>
        </div>
        <div class="info-item">
          <span class="label">邮箱：</span>
          <span>{{ userInfo.email }}</span>
        </div>
        <div class="info-item">
          <span class="label">手机：</span>
          <span>{{ userInfo.mobile }}</span>
        </div>
      </div>
      <el-row class="edit-row">
        <el-col :span="12" class="text-center">
          <el-button type="primary" @click="dialogVisible = true">更新个人信息</el-button>
        </el-col>
        <el-col :span="12" class="text-center">
          <el-button type="primary" @click="openUpdatePasswordDialog">修改密码</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="编辑个人信息" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false" :modal="false">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
    <!--修改密码界面-->
    <el-dialog :close-on-click-modal="false" :modal="false" :visible.sync="updatePwdDialogVisible" title="修改密码"
               width="40%">
      <el-form ref="updatePwdDataForm" :model="updatePwdDataForm" :rules="updatePwdDataFormRules" size="small"
               label-width="100px">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="updatePwdDataForm.password" auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="updatePwdDataForm.newPassword" auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="updatePwdDataForm.comfirmPassword" auto-complete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click.native="updatePwdDialogVisible = false">取消</el-button>
        <el-button :loading="updatePwdLoading" size="small" type="primary" @click.native="updatePassword">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      userInfo: {
        name: '',
        nickName: '',
        deptName: '',
        roleName: '',
        email: '',
        mobile: '',
      },
      dialogVisible: false,
      editForm: {
        name:'',
        email: '',
        mobile: '',
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
        mobile: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          // {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change']}
        ]
      },
      updatePwdDialogVisible: false,
      updatePwdLoading: false,
      updatePwdDataForm: {
        password: '',
        newPassword: '',
        comfirmPassword: ''
      },
      updatePwdDataFormRules: {
        password: [
          {required: true, message: '请输入原密码', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'}
        ],
        comfirmPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    getPersonInfo() {
      this.$api.user.getUserInfo({name: sessionStorage.getItem('user')}).then((res) => {
        this.userInfo.name = res.data.name;
        this.userInfo.nickName = res.data.nickName;
        this.userInfo.deptName = res.data.deptName;
        this.userInfo.roleName = res.data.roleNames;
        this.userInfo.email = res.data.email;
        this.userInfo.mobile = res.data.mobile;
      })
    },
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.userInfo.email = this.editForm.email;
          this.userInfo.mobile = this.editForm.mobile;
          this.editForm.name = this.userInfo.name
          this.$api.user.updateUserInfo(this.editForm).then((res) => {
            if(res.code === 200) {
              this.dialogVisible = false;
              this.$message.success('个人信息更新成功');
              this.getPersonInfo();
            }
            else {
              this.$message.error('个人信息更新失败');
            }
          })
        }
      });
    },
    // 打开修改密码对话框
    openUpdatePasswordDialog: function () {
      this.updatePwdDialogVisible = true
    },
    // 修改密码
    updatePassword: function () {
      this.$refs.updatePwdDataForm.validate((valid) => {
        if (valid) {
          if (this.updatePwdDataForm.newPassword !== this.updatePwdDataForm.comfirmPassword) {
            this.$message({message: '新密码与确认新密码不一致', type: 'error'})
            return
          }
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.updatePwdLoading = true
            let params = {password: this.updatePwdDataForm.password, newPassword: this.updatePwdDataForm.newPassword}
            this.$api.user.updatePassword(params).then((res) => {
              this.updatePwdLoading = false
              if (res.code === 200) {
                this.$message({message: '操作成功', type: 'success'})
                this.$refs['updatePwdDataForm'].resetFields()
              } else {
                this.$message({message: '操作失败, ' + res.msg, type: 'error'})
              }
              this.updatePwdDialogVisible = false
            })
          })
        }
      })
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.editForm.email = this.userInfo.email;
        this.editForm.mobile = this.userInfo.mobile;
      }
    }
  },
  mounted() {
    this.getPersonInfo();
  }
}
</script>

<style scoped>
.personal-profile {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.profile-card {
  text-align: center;
  padding: 20px 40px 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-list {
  text-align: left;
  margin-top: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
}

.edit-row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>

